<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信小程序后台管理系统</title>
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 全局样式重置和基本字体设置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        /* 定义 CSS 变量，方便主题管理 */
        :root {
            --primary: #07c160; /* 主要颜色 (微信绿) */
            --primary-dark: #06ad56; /* 主要颜色深色版 */
            --secondary: #1989fa; /* 次要颜色 (蓝色) */
            --dark: #333; /* 深色文本 */
            --light: #f5f7fa; /* 浅色背景 */
            --gray: #909399; /* 灰色文本 */
            --border: #dcdfe6; /* 边框颜色 */
            --danger: #f56c6c; /* 危险/错误颜色 */
            --warning: #e6a23c; /* 警告颜色 */
            --success: #67c23a; /* 成功颜色 */
            --sidebar-width: 240px; /* 侧边栏宽度 */
            --header-height: 60px; /* 顶部导航栏高度 */
        }

        /* 页面主体样式 */
        body {
            background-color: #f0f2f5;
            color: #333;
            min-height: 100vh; /* 最小高度占满视口 */
        }

        /* 应用容器布局，使用 Flexbox 实现侧边栏和主内容区布局 */
        .app-container {
            display: flex;
            min-height: 100vh;
        }

        /* 侧边栏样式 */
        .sidebar {
            width: var(--sidebar-width);
            background: #fff;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.05); /* 阴影效果 */
            position: fixed; /* 固定定位 */
            height: 100vh; /* 高度占满视口 */
            z-index: 100; /* 层级较高 */
            transition: all 0.3s; /* 过渡动画 */
        }

        .sidebar-header {
            height: var(--header-height);
            display: flex;
            align-items: center;
            padding: 0 20px;
            border-bottom: 1px solid var(--border); /* 底部边框 */
        }

        .logo {
            font-size: 22px;
            font-weight: 600;
            color: var(--primary);
        }

        .logo i {
            margin-right: 10px;
        }

        .menu {
            padding: 15px 0;
        }

        .menu-item {
            padding: 12px 25px;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s;
            color: #555;
            position: relative;
        }

        .menu-item:hover {
            background: rgba(7, 193, 96, 0.1); /* 悬停背景色 */
            color: var(--primary);
        }

        .menu-item.active {
            background: rgba(7, 193, 96, 0.1);
            color: var(--primary);
            border-left: 4px solid var(--primary); /* 激活状态左侧边框 */
        }

        .menu-item i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }

        /* 主内容区样式 */
        .main-content {
            flex: 1; /* 占据剩余空间 */
            margin-left: var(--sidebar-width); /* 留出侧边栏空间 */
            transition: all 0.3s;
        }

        /* 顶部导航栏样式 */
        .header {
            height: var(--header-height);
            background: #fff;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 25px;
            position: sticky; /* 粘性定位，滚动时固定在顶部 */
            top: 0;
            z-index: 99;
        }

        .system-name {
            font-size: 20px;
            font-weight: 600;
            color: #333;
        }

        .admin-info {
            display: flex;
            align-items: center;
        }

        .admin-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 10px;
        }

        .admin-name {
            font-weight: 500;
        }

        /* 内容区域样式 */
        .content {
            padding: 25px;
        }

        .content-section {
            display: none; /* 默认隐藏 */
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .content-section.active {
            display: block; /* 激活时显示 */
            opacity: 1;
            transform: translateY(0);
        }

        .content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }

        .content-title {
            font-size: 20px;
            font-weight: 600;
            color: #333;
            position: relative;
            padding-left: 15px;
        }

        .content-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 70%;
            background: var(--primary);
            border-radius: 2px;
        }

        .btn {
            padding: 8px 15px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            outline: none;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
        }

        .btn i {
            margin-right: 5px;
        }

        .btn-primary {
            background: var(--primary);
            color: white;
        }

        .btn-primary:hover {
            background: var(--primary-dark);
        }

        .btn-danger {
            background: var(--danger);
            color: white;
        }

        .btn-danger:hover {
            background: #e35b5b;
        }

        /* 卡片和表格样式 */
        .card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
            overflow: hidden;
            margin-bottom: 25px;
        }

        .table-container {
            overflow-x: auto; /* 表格内容溢出时显示滚动条 */
        }

        table {
            width: 100%;
            border-collapse: collapse; /* 合并边框 */
            min-width: 800px; /* 最小宽度，防止内容过少时表格过窄 */
        }

        thead {
            background: #f5f7fa;
        }

        th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }

        th {
            font-weight: 600;
            color: #606266;
        }

        tbody tr:hover {
            background: #f5f7fa;
        }

        .action-btn {
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 13px;
            cursor: pointer;
            border: none;
            outline: none;
            transition: all 0.3s;
            margin-right: 5px;
        }

        .action-edit {
            background: var(--secondary);
            color: white;
        }

        .action-delete {
            background: var(--danger);
            color: white;
        }

        /* 状态标签样式 */
        .status {
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 12px;
            display: inline-block;
        }

        .status-pending {
            background: #fdf6ec;
            color: #e6a23c;
        }

        .status-shipped {
            background: #f0f9eb;
            color: var(--success);
        }

        .status-delivered {
            background: #e6f7ff;
            color: var(--secondary);
        }

        .status-canceled {
            background: #fef0f0;
            color: var(--danger);
        }

        /* 图片容器样式 */
        .product-image {
            width: 60px;
            height: 60px;
            border-radius: 6px;
            background: #f0f2f5;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .product-image:hover img {
            transform: scale(1.05);
        }

        .placeholder-icon {
            font-size: 24px;
            color: #ccc;
        }

        /* 模态框样式 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background: white;
            border-radius: 8px;
            width: 90%;
            max-width: 600px; /* 最大宽度 */
            max-height: 90vh; /* 最大高度 */
            overflow-y: auto; /* 内容溢出时滚动 */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .modal-header {
            padding: 15px 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f5f7fa;
        }

        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--dark);
        }

        .modal-close {
            cursor: pointer;
            font-size: 24px;
            color: var(--gray);
            transition: color 0.3s;
        }

        .modal-close:hover {
            color: var(--dark);
        }

        .modal-body {
            padding: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #555;
        }

        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 14px;
            transition: all 0.3s;
        }

        .form-control:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.2);
        }

        .form-row {
            display: flex;
            gap: 15px;
        }

        .form-col {
            flex: 1;
        }

        .modal-footer {
            padding: 15px 20px;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            background: #f9f9f9;
        }

        /* 加载动画样式 */
        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid var(--primary);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 图片预览样式 */
        .image-preview {
            width: 100px;
            height: 100px;
            border: 1px dashed #ddd;
            border-radius: 6px;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .image-preview img {
            max-width: 100%;
            max-height: 100%;
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .sidebar {
                width: 70px; /* 侧边栏收起 */
            }

            .sidebar .menu-text, .logo-text {
                display: none; /* 隐藏文字 */
            }

            .logo i {
                margin-right: 0;
                font-size: 24px;
            }

            .menu-item {
                justify-content: center;
                padding: 15px 0;
            }

            .menu-item i {
                margin-right: 0;
                font-size: 18px;
            }

            .main-content {
                margin-left: 70px;
            }
        }

        @media (max-width: 768px) {
            .content {
                padding: 15px;
            }

            .content-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            .admin-info {
                font-size: 14px;
            }

            table {
                min-width: 600px; /* 较小屏幕下表格最小宽度 */
            }
        }

        /* 状态标签的额外样式，确保内联块显示和圆角 */
        .status-pending, .status-shipped, .status-delivered, .status-canceled {
            padding: 4px 8px;
            border-radius: 4px;
            display: inline-block;
        }

        /* 分类选择器样式 */
        .category-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 25px;
            padding: 15px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
            align-items: center; /* 垂直居中对齐 */
        }

        .category-selector label {
            margin-right: 10px;
            font-weight: 500;
            color: #555;
        }

        .category-selector select {
            padding: 8px 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 14px;
            background-color: white;
            cursor: pointer;
            transition: all 0.3s;
        }

        .category-selector select:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.2);
        }

        /* 分类产品展示区域 */
        .category-products {
            display: none; /* 默认隐藏 */
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
            padding: 20px;
            margin-top: 20px;
        }

        .category-products.active {
            display: block; /* 激活时显示 */
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 响应式网格布局 */
            gap: 20px;
        }

        .product-card {
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .product-image-container {
            height: 180px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f9fa;
        }

        .product-image-container img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .product-info {
            padding: 15px;
        }

        .product-name {
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 16px;
        }

        .product-price {
            color: var(--danger);
            font-weight: bold;
            margin-bottom: 8px;
        }

        .product-stock {
            color: var(--gray);
            font-size: 14px;
        }

        /* 添加错误详情样式 */
        .error-detail {
            font-size: 12px;
            color: var(--danger);
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="app-container">
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <div class="logo">
                <i class="fas fa-cogs"></i>
                <span class="logo-text">小程序后台</span>
            </div>
        </div>
        <div class="menu">
            <div class="menu-item" data-target="users">
                <i class="fas fa-users"></i>
                <span class="menu-text">用户管理</span>
            </div>
            <div class="menu-item active" data-target="roll">
                <i class="fas fa-list"></i>
                <span class="menu-text">滚动列表</span>
            </div>
            <div class="menu-item" data-target="products">
                <i class="fas fa-star"></i>
                <span class="menu-text">精选好物</span>
            </div>
            <div class="menu-item" data-target="categories">
                <i class="fas fa-tags"></i>
                <span class="menu-text">分类列表</span>
            </div>
            <div class="menu-item" data-target="orders">
                <i class="fas fa-file-invoice"></i>
                <span class="menu-text">订单列表</span>
            </div>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <!-- 顶部导航栏 -->
        <div class="header">
            <div class="system-name">微信小程序后台管理系统</div>
            <div class="admin-info">
                <div class="admin-avatar">A</div>
                <div class="admin-name">管理员: Admin</div>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <!-- 用户管理 -->
            <div class="content-section" id="users">
                <div class="content-header">
                    <div class="content-title">用户管理</div>
                    <button class="btn btn-primary">
                        <i class="fas fa-plus"></i> 添加管理员
                    </button>
                </div>

                <div class="card">
                    <div class="table-container">
                        <table>
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>用户名</th>
                                <th>角色</th>
                                <th>邮箱</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="users-table-body">
                            <tr>
                                <td colspan="7" style="text-align: center; padding: 20px;">
                                    <div class="loader"></div>
                                    <p>正在加载用户数据...</p>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 滚动列表 -->
            <div class="content-section active" id="roll">
                <div class="content-header">
                    <div class="content-title">滚动列表管理</div>
                    <button class="btn btn-primary" id="addRollItem">
                        <i class="fas fa-plus"></i> 添加物品
                    </button>
                </div>

                <div class="card">
                    <div class="table-container">
                        <table>
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>图片</th>
                                <th>商品名称</th>
                                <th>描述</th>
                                <th>价格</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="roll-table-body">
                            <tr>
                                <td colspan="6" style="text-align: center; padding: 20px;">
                                    <div class="loader"></div>
                                    <p>正在加载滚动列表数据...</p>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 精选好物 -->
            <div class="content-section" id="products">
                <div class="content-header">
                    <div class="content-title">精选好物管理</div>
                    <button class="btn btn-primary" id="addProductItem">
                        <i class="fas fa-plus"></i> 添加物品
                    </button>
                </div>

                <div class="card">
                    <div class="table-container">
                        <table>
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>图片</th>
                                <th>商品名称</th>
                                <th>商品信息</th>
                                <th>价格</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="products-table-body">
                            <tr>
                                <td colspan="6" style="text-align: center; padding: 20px;">
                                    <div class="loader"></div>
                                    <p>正在加载精选好物数据...</p>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 分类列表 -->
            <div class="content-section" id="categories">
                <div class="content-header">
                    <div class="content-title">分类列表管理</div>
                    <button class="btn btn-primary">
                        <i class="fas fa-plus"></i> 添加分类
                    </button>
                </div>

                <!-- 分类选择下拉框 -->
                <div class="category-selector">
                    <label for="category-select">选择分类:</label>
                    <select id="category-select" class="form-control">
                        <option value="">所有分类</option>
                        <option value="电子产品">电子产品</option>
                        <option value="家居用品">家居用品</option>
                        <option value="食品生鲜">食品生鲜</option>
                        <option value="户外运动">户外运动</option>
                        <option value="其他">其他</option>
                    </select>
                </div>

                <div class="card">
                    <div class="table-container">
                        <table>
                            <thead>
                            <tr>
                                <th>分类ID</th>
                                <th>分类名称</th>
                                <th>商品数量</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>1</td>
                                <td>电子产品</td>
                                <td>86</td>
                                <td><span style="color: var(--success);">● 启用</span></td>
                                <td>2023-01-15</td>
                                <td>
                                    <button class="action-btn action-edit"><i class="fas fa-edit"></i> 编辑</button>
                                    <button class="action-btn action-delete"><i class="fas fa-trash"></i> 删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 分类物品展示区域 -->
                <div class="category-products active" id="category-products">
                    <div class="content-header">
                        <div class="content-title">分类物品展示</div>
                    </div>
                    <div class="products-grid" id="products-container">
                        <!-- 物品将通过JavaScript动态加载 -->
                        <div style="text-align:center;padding:20px;grid-column: 1 / -1;">
                            <div class="loader"></div>
                            <p>请选择一个分类来查看物品</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 订单列表 -->
            <div class="content-section" id="orders">
                <div class="content-header">
                    <div class="content-title">订单列表管理</div>
                    <button class="btn btn-primary">
                        <i class="fas fa-plus"></i> 添加订单
                    </button>
                </div>

                <div class="card">
                    <div class="table-container">
                        <table>
                            <thead>
                            <tr>
                                <th>订单号</th>
                                <th>图片</th>
                                <th>物品名称</th>
                                <th>数量</th>
                                <th>价格</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="orders-table-body">
                            <tr>
                                <td colspan="7" style="text-align: center; padding: 20px;">
                                    <div class="loader"></div>
                                    <p>正在加载订单数据...</p>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加滚动物品模态框 -->
<div class="modal" id="addRollModal">
    <div class="modal-content">
        <div class="modal-header">
            <div class="modal-title">添加滚动商品</div>
            <div class="modal-close">&times;</div>
        </div>
        <div class="modal-body">
            <form id="rollItemForm">
                <div class="form-row">
                    <div class="form-col">
                        <div class="form-group">
                            <label class="form-label">商品名称</label>
                            <input type="text" class="form-control" id="rollName" placeholder="输入商品名称" required>
                        </div>
                    </div>
                    <div class="form-col">
                        <div class="form-group">
                            <label class="form-label">价格 (¥)</label>
                            <input type="number" class="form-control" id="rollPrice" placeholder="输入商品价格" step="0.01" required>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">描述信息</label>
                    <textarea class="form-control" id="rollDescription" rows="3" placeholder="输入商品描述" required></textarea>
                </div>

                <div class="form-group">
                    <label class="form-label">图片URL</label>
                    <input type="text" class="form-control" id="rollImageUrl" placeholder="输入图片链接" required>
                    <div class="image-preview" id="rollImagePreview">
                        <i class="fas fa-image placeholder-icon"></i>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">分类</label>
                    <select class="form-control" id="rollCategory">
                        <option>电子产品</option>
                        <option>家居用品</option>
                        <option>食品生鲜</option>
                        <option>户外运动</option>
                        <option>其他</option>
                    </select>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn" id="cancelRollBtn">取消</button>
            <button class="btn btn-primary" id="saveRollBtn">保存</button>
        </div>
    </div>
</div>

<!-- 添加精选好物模态框 -->
<div class="modal" id="addProductModal">
    <div class="modal-content">
        <div class="modal-header">
            <div class="modal-title">添加精选好物</div>
            <div class="modal-close">&times;</div>
        </div>
        <div class="modal-body">
            <form id="productItemForm">
                <div class="form-row">
                    <div class="form-col">
                        <div class="form-group">
                            <label class="form-label">商品名称</label>
                            <input type="text" class="form-control" id="productName" placeholder="输入商品名称" required>
                        </div>
                    </div>
                    <div class="form-col">
                        <div class="form-group">
                            <label class="form-label">价格 (¥)</label>
                            <input type="number" class="form-control" id="productPrice" placeholder="输入商品价格" step="0.01" required>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">商品信息</label>
                    <textarea class="form-control" id="productInfo" rows="3" placeholder="输入商品信息" required></textarea>
                </div>

                <div class="form-group">
                    <label class="form-label">图片URL</label>
                    <input type="text" class="form-control" id="productImageUrl" placeholder="输入图片链接" required>
                    <div class="image-preview" id="productImagePreview">
                        <i class="fas fa-image placeholder-icon"></i>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">分类</label>
                    <select class="form-control" id="productCategory">
                        <option>电子产品</option>
                        <option>家居用品</option>
                        <option>食品生鲜</option>
                        <option>户外运动</option>
                        <option>其他</option>
                    </select>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn" id="cancelProductBtn">取消</button>
            <button class="btn btn-primary" id="saveProductBtn">保存</button>
        </div>
    </div>
</div>

<script>
    // 定义后端 API 的基础 URL
    const API_BASE_URL = '/api';

    // DOMContentLoaded 事件确保在 DOM 完全加载后执行脚本
    document.addEventListener('DOMContentLoaded', function() {
        const menuItems = document.querySelectorAll('.menu-item');
        const contentSections = document.querySelectorAll('.content-section');

        // 分类选择功能相关的 DOM 元素
        const categorySelect = document.getElementById('category-select');
        const categoryProductsSection = document.getElementById('category-products');
        const productsContainer = document.getElementById('products-container');
        const categoriesTableBody = document.querySelector('#categories .card tbody'); // 获取分类表格的 tbody

        // 模拟分类物品数据（实际应用中应从后端 API 获取）
        // 为了演示，这里将所有产品数据整合在一起，并添加了 category 字段
        const allProductsData = [
            {id: 101, name: '智能手机', price: 3999, image: 'https://placehold.co/300x300/E0E0E0/333333?text=Smartphone', stock: 56, category: '电子产品'},
            {id: 102, name: '无线耳机', price: 599, image: 'https://placehold.co/300x300/E0E0E0/333333?text=Headphones', stock: 120, category: '电子产品'},
            {id: 103, name: '平板电脑', price: 2999, image: 'https://placehold.co/300x300/E0E0E0/333333?text=Tablet', stock: 34, category: '电子产品'},
            {id: 104, name: '智能手表', price: 1299, image: 'https://placehold.co/300x300/E0E0E0/333333?text=Smartwatch', stock: 78, category: '电子产品'},
            {id: 201, name: '台灯', price: 199, image: 'https://placehold.co/300x300/E0E0E0/333333?text=Lamp', stock: 45, category: '家居用品'},
            {id: 202, name: '餐具套装', price: 299, image: 'https://placehold.co/300x300/E0E0E0/333333?text=Tableware', stock: 89, category: '家居用品'},
            {id: 301, name: '有机水果', price: 49.9, image: 'https://placehold.co/300x300/E0E0E0/333333?text=Fruit', stock: 200, category: '食品生鲜'},
            {id: 302, name: '进口牛肉', price: 129.9, image: 'https://placehold.co/300x300/E0E0E0/333333?text=Beef', stock: 56, category: '食品生鲜'},
            {id: 401, name: '登山包', price: 399, image: 'https://placehold.co/300x300/E0E0E0/333333?text=Backpack', stock: 34, category: '户外运动'},
            {id: 402, name: '帐篷', price: 599, image: 'https://placehold.co/300x300/E0E0E0/333333?text=Tent', stock: 23, category: '户外运动'},
            {id: 501, name: '书籍', price: 49, image: 'https://placehold.co/300x300/E0E0E0/333333?text=Book', stock: 156, category: '其他'},
            {id: 502, name: '文具套装', price: 89, image: 'https://placehold.co/300x300/E0E0E0/333333?text=Stationery', stock: 89, category: '其他'}
        ];


        // 为分类选择下拉框添加事件监听器
        categorySelect.addEventListener('change', function() {
            const selectedCategory = this.value; // 获取选中的分类值
            displayCategoryProducts(selectedCategory); // 显示对应分类的物品
            categoryProductsSection.classList.add('active'); // 确保物品展示区域可见
        });

        // 显示分类物品的函数
        function displayCategoryProducts(category) {
            productsContainer.innerHTML = ''; // 清空现有内容

            let filteredProducts = [];
            if (category === "") {
                // 如果选择“所有分类”，则显示所有产品
                filteredProducts = allProductsData;
            } else {
                // 否则，根据选择的分类过滤产品
                filteredProducts = allProductsData.filter(product => product.category === category);
            }

            if (filteredProducts.length > 0) {
                filteredProducts.forEach(product => {
                    const productCard = document.createElement('div');
                    productCard.className = 'product-card';
                    productCard.innerHTML = `
                        <div class="product-image-container">
                            <img src="${product.image}" alt="${product.name}" onerror="this.src='https://placehold.co/300x300/E0E0E0/333333?text=Error'">
                        </div>
                        <div class="product-info">
                            <div class="product-name">${product.name}</div>
                            <div class="product-price">¥${product.price.toFixed(2)}</div>
                            <div class="product-stock">库存: ${product.stock}件</div>
                        </div>
                    `;
                    productsContainer.appendChild(productCard);
                });
            } else {
                productsContainer.innerHTML = `<div style="text-align:center;padding:20px;grid-column: 1 / -1;" class="no-data">
                                                    <i class="fas fa-inbox"></i>
                                                    <p>该分类下暂无物品</p>
                                                </div>`;
            }
        }

        // 默认显示滚动列表并加载数据
        document.querySelector('.menu-item[data-target="roll"]').classList.add('active');
        document.getElementById('roll').classList.add('active');
// ------------------------------------------------------------------------
        // 函数：加载并渲染分类数据
        function loadCategoriesData() {
            fetch(`${API_BASE_URL}/categories`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应错误：无法加载分类数据');
                    }
                    return response.json();
                })
                .then(data => {
                    renderCategories(data); // 渲染分类到表格
                    // 填充分类选择下拉框
                    categorySelect.innerHTML = '<option value="">所有分类</option>';
                    data.forEach(category => {
                        const option = document.createElement('option');
                        option.value = category.id; // 使用分类 ID 作为值
                        option.textContent = category.name;
                        categorySelect.appendChild(option);
                    });
                })
                .catch(error => {
                    console.error('加载分类数据失败:', error);
                    showMessageBox('加载分类数据失败，显示模拟数据。', 'error');
                    // 如果 API 失败，回退到模拟数据
                    const mockCategories = [
                        {id: 1, name: '电子产品', item_count: 86, status: '启用', created_at: '2023-01-15'},
                        {id: 2, name: '家居用品', item_count: 45, status: '启用', created_at: '2023-03-20'},
                        {id: 3, name: '食品生鲜', item_count: 120, status: '启用', created_at: '2023-05-01'}
                    ];
                    renderCategories(mockCategories);
                    categorySelect.innerHTML = '<option value="">所有分类</option>';
                    mockCategories.forEach(category => {
                        const option = document.createElement('option');
                        option.value = category.id;
                        option.textContent = category.name;
                        categorySelect.appendChild(option);
                    });
                });
        }

        // 函数：加载并渲染分类物品数据
        // 更新后的 loadCategoryItems 函数
        // 修改后的加载分类物品函数
        function loadCategoryItems(categoryId) {
            productsContainer.innerHTML = `<div style="text-align:center;padding:20px;grid-column: 1 / -1;">
            <div class="loader"></div>
            <p>正在加载分类物品...</p>
        </div>`;

            fetch(`${API_BASE_URL}/categories/${categoryId}/items`)
                .then(response => {
                    if (!response.ok) throw new Error('网络响应错误');
                    return response.json();
                })
                .then(data => {
                    // 数据清洗：确保价格是数字
                    const cleanedData = data.map(item => ({
                        ...item,
                        price: parseFloat(item.price) || 0
                    }));
                    renderCategoryProducts(cleanedData);
                })
                .catch(error => {
                    console.error('加载分类物品失败:', error);
                    productsContainer.innerHTML = `<div style="text-align:center;padding:20px;grid-column: 1 / -1;" class="no-data">
                    <i class="fas fa-exclamation-circle"></i>
                    <p>加载分类物品失败，请稍后再试。</p>
                    <small>${error.message}</small>
                </div>`;
                });
        }

        // 渲染分类到表格的函数
        function renderCategories(categories) {
            categoriesTableBody.innerHTML = ''; // 清空现有内容

            if (!categories || categories.length === 0) {
                categoriesTableBody.innerHTML = `
                    <tr>
                        <td colspan="6" style="text-align: center; padding: 20px;" class="no-data">
                            <i class="fas fa-inbox"></i>
                            <p>没有找到分类数据</p>
                        </td>
                    </tr>
                `;
                return;
            }

            categories.forEach(category => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${category.id}</td>
                    <td>${category.name}</td>
                    <td>${category.item_count}</td>
                    <td><span style="color: ${category.status === '启用' ? 'var(--success)' : 'var(--danger)'}">● ${category.status}</span></td>
                    <td>${category.created_at ? new Date(category.created_at).toISOString().split('T')[0] : 'N/A'}</td>
                    <td>
                        <button class="action-btn action-edit"><i class="fas fa-edit"></i> 编辑</button>
                        <button class="action-btn action-delete"><i class="fas fa-trash"></i> 删除</button>
                    </td>
                `;
                categoriesTableBody.appendChild(tr);
            });
        }

        // 显示分类物品的函数（已修改以使用获取的数据）
        // 修改后的渲染分类物品函数
        function renderCategoryProducts(products) {
            productsContainer.innerHTML = '';

            if (products.length > 0) {
                products.forEach(product => {
                    // 确保价格是数字类型
                    const price = parseFloat(product.price);
                    const isValidPrice = !isNaN(price);

                    const productCard = document.createElement('div');
                    productCard.className = 'product-card';
                    productCard.innerHTML = `
                    <div class="product-image-container">
                        <img src="${product.image_url}" alt="${product.name}"
                             onerror="this.src='https://placehold.co/300x300/E0E0E0/333333?text=Error'">
                    </div>
                    <div class="product-info">
                        <div class="product-name">${product.name}</div>
                        <div class="product-price">${isValidPrice ? '¥' + price.toFixed(2) : '价格无效'}</div>
                        <div class="product-stock">库存: ${product.stock || 0}件</div>
                    </div>
                `;
                    productsContainer.appendChild(productCard);
                });
            } else {
                productsContainer.innerHTML = `<div style="text-align:center;padding:20px;grid-column: 1 / -1;" class="no-data">
                <i class="fas fa-inbox"></i>
                <p>该分类下暂无物品</p>
            </div>`;
            }
        }

        // 更新后的分类选择事件处理
        categorySelect.addEventListener('change', function() {
            const selectedCategoryId = this.value;
            if (selectedCategoryId) {
                loadCategoryItems(selectedCategoryId);
                categoryProductsSection.classList.add('active');
            } else {
                // 默认显示所有物品
                loadCategoryItems("");
                categoryProductsSection.classList.add('active');
            }
        });

        // 确保页面加载时显示所有物品
        document.addEventListener('DOMContentLoaded', function() {
            // 默认加载所有分类的物品
            loadCategoryItems("");
        });
// -------------------------------------------------------------------------------
        // 初始加载所有模块的数据
        loadRollData();
        loadUserData();
        loadProductData();
        loadOrderData();
        // 默认加载“所有分类”的物品
        displayCategoryProducts('');
        loadCategoriesData(); // 页面加载时加载分类数据


        // 菜单项点击事件处理
        menuItems.forEach(item => {
            item.addEventListener('click', function() {
                // 移除所有菜单项的激活状态，并为当前点击的菜单项添加激活状态
                menuItems.forEach(i => i.classList.remove('active'));
                this.classList.add('active');

                // 获取目标内容区域的 ID
                const targetId = this.getAttribute('data-target');

                // 隐藏所有内容区域
                contentSections.forEach(section => {
                    section.classList.remove('active');
                });

                // 延迟显示目标内容区域，以便过渡动画生效
                setTimeout(() => {
                    document.getElementById(targetId).classList.add('active');

                    // 根据目标区域加载对应数据
                    if (targetId === 'users') {
                        loadUserData();
                    } else if (targetId === 'roll') {
                        loadRollData();
                    } else if (targetId === 'products') {
                        loadProductData();
                    } else if (targetId === 'orders') {
                        loadOrderData();
                    } else if (targetId === 'categories') {
                        loadCategoriesData(); // 点击分类标签时重新加载分类数据
                        // 您可能希望预先选择“所有分类”或第一个分类并加载其物品
                        categorySelect.value = ''; // 重置下拉框
                        productsContainer.innerHTML = `<div style="text-align:center;padding:20px;grid-column: 1 / -1;" class="no-data">
                                                            <i class="fas fa-inbox"></i>
                                                            <p>请选择一个分类来查看物品</p>
                                                        </div>`;
                    }
                }, 50);
            });
        });

        // 模态框控制逻辑
        const addRollBtn = document.getElementById('addRollItem');
        const addRollModal = document.getElementById('addRollModal');
        const closeModalButtons = document.querySelectorAll('.modal-close'); // 统一获取所有关闭按钮
        const cancelRollBtn = document.getElementById('cancelRollBtn');

        const addProductBtn = document.getElementById('addProductItem');
        const addProductModal = document.getElementById('addProductModal');
        const cancelProductBtn = document.getElementById('cancelProductBtn');

        // 监听“添加物品”按钮点击事件，显示滚动商品模态框
        if(addRollBtn) {
            addRollBtn.addEventListener('click', () => {
                addRollModal.style.display = 'flex';
            });
        }

        // 监听“添加物品”按钮点击事件，显示精选好物模态框
        if(addProductBtn) {
            addProductBtn.addEventListener('click', () => {
                addProductModal.style.display = 'flex';
            });
        }

        // 遍历所有关闭按钮，为其添加点击事件，关闭最近的模态框
        closeModalButtons.forEach(btn => {
            btn.addEventListener('click', function() {
                this.closest('.modal').style.display = 'none';
            });
        });

        // 监听滚动商品模态框的“取消”按钮点击事件
        if(cancelRollBtn) {
            cancelRollBtn.addEventListener('click', () => {
                addRollModal.style.display = 'none';
            });
        }

        // 监听精选好物模态框的“取消”按钮点击事件
        if(cancelProductBtn) {
            cancelProductBtn.addEventListener('click', () => {
                addProductModal.style.display = 'none';
            });
        }

        // 点击模态框外部区域关闭模态框
        window.addEventListener('click', (e) => {
            if (e.target.classList.contains('modal')) {
                e.target.style.display = 'none';
            }
        });

        // 保存滚动商品按钮点击事件
        document.getElementById('saveRollBtn').addEventListener('click', () => {
            const name = document.getElementById('rollName').value;
            const price = parseFloat(document.getElementById('rollPrice').value);
            const description = document.getElementById('rollDescription').value;
            const imageUrl = document.getElementById('rollImageUrl').value;

            // 简单的表单验证
            if (!name || isNaN(price) || !description || !imageUrl) {
                // 使用自定义消息框替代 alert
                showMessageBox('请填写所有必填字段并确保价格为有效数字！', 'warning');
                return;
            }

            // 模拟发送数据到后端（实际应用中应使用 fetch 或 XMLHttpRequest）
            console.log('保存滚动商品:', {name, price, description, imageUrl});
            addRollModal.style.display = 'none'; // 关闭模态框

            // 模拟添加新数据并更新表格
            const newItem = {
                id: Math.floor(Math.random() * 1000) + 8, // 模拟 ID
                name,
                description,
                imageUrl,
                price
            };

            // 获取表格 tbody 元素并添加新行
            const tbody = document.getElementById('roll-table-body');
            // 检查是否显示了“没有找到数据”的提示，如果是则移除
            if (tbody.querySelector('.no-data')) {
                tbody.innerHTML = '';
            }
            const tr = document.createElement('tr');
            tr.innerHTML = createRollItemHTML(newItem);
            tbody.appendChild(tr);
            showMessageBox('滚动商品添加成功！', 'success');
        });

        // 保存精选好物按钮点击事件
        document.getElementById('saveProductBtn').addEventListener('click', () => {
            const name = document.getElementById('productName').value;
            const price = parseFloat(document.getElementById('productPrice').value);
            const information = document.getElementById('productInfo').value;
            const imageUrl = document.getElementById('productImageUrl').value;

            // 简单的表单验证
            if (!name || isNaN(price) || !information || !imageUrl) {
                showMessageBox('请填写所有必填字段并确保价格为有效数字！', 'warning');
                return;
            }

            // 模拟发送数据到后端
            console.log('保存精选好物:', {name, price, information, imageUrl});
            addProductModal.style.display = 'none'; // 关闭模态框

            // 模拟添加新数据并更新表格
            const newItem = {
                id: Math.floor(Math.random() * 1000) + 7, // 模拟 ID
                name,
                information,
                imageUrl,
                shopprice: `¥${price.toFixed(2)}` // 模拟价格格式
            };

            // 获取表格 tbody 元素并添加新行
            const tbody = document.getElementById('products-table-body');
            // 检查是否显示了“没有找到数据”的提示，如果是则移除
            if (tbody.querySelector('.no-data')) {
                tbody.innerHTML = '';
            }
            const tr = document.createElement('tr');
            tr.innerHTML = createProductItemHTML(newItem);
            tbody.appendChild(tr);
            showMessageBox('精选好物添加成功！', 'success');
        });

        // 图片预览功能：滚动商品图片
        document.getElementById('rollImageUrl').addEventListener('input', function() {
            const preview = document.getElementById('rollImagePreview');
            preview.innerHTML = this.value ?
                `<img src="${this.value}" alt="预览图" onerror="this.parentElement.innerHTML='<i class=\\'fas fa-image placeholder-icon\\'></i>'">` :
                `<i class="fas fa-image placeholder-icon"></i>`;
        });

        // 图片预览功能：精选好物图片
        document.getElementById('productImageUrl').addEventListener('input', function() {
            const preview = document.getElementById('productImagePreview');
            preview.innerHTML = this.value ?
                `<img src="${this.value}" alt="预览图" onerror="this.parentElement.innerHTML='<i class=\\'fas fa-image placeholder-icon\\'></i>'">` :
                `<i class="fas fa-image placeholder-icon"></i>`;
        });
    });

    // --- 数据加载函数 ---

    // 加载用户数据
    function loadUserData() {
        fetch(`${API_BASE_URL}/users`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应异常');
                }
                return response.json();
            })
            .then(data => renderUsers(data))
            .catch(error => {
                console.error('加载用户数据失败:', error);
                // 提供模拟数据作为降级方案
                const mockUsers = [
                    {id: 1, username: '张三', role: '管理员', email: 'zhangsan@example.com', status: 'active', created_at: '2023-01-01'},
                    {id: 2, username: '李四', role: '普通用户', email: 'lisi@example.com', status: 'inactive', created_at: '2023-02-10'}
                ];
                renderUsers(mockUsers);
                showMessageBox('加载用户数据失败，显示模拟数据。', 'error');
            });
    }

    // 加载滚动列表数据
    function loadRollData() {
        fetch(`${API_BASE_URL}/roll`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应异常');
                }
                return response.json();
            })
            .then(data => renderRollItems(data))
            .catch(error => {
                console.error('加载滚动列表失败:', error);
                // 提供模拟数据作为降级方案
                const mockRoll = [
                    {id: 1, name: 'MetaPad Pro 202', description: '基础OLID全面屏，轻薄便携，性能强劲。', imageUrl: 'https://placehold.co/60x60/FF5733/FFFFFF?text=Pad', price: 4899.00},
                    {id: 2, name: '智能手环X', description: '健康监测，运动追踪，续航持久。', imageUrl: 'https://placehold.co/60x60/33FF57/FFFFFF?text=Band', price: 299.00},
                    {id: 3, name: '高清摄像头', description: '1080P高清，夜视功能，家庭安防首选。', imageUrl: 'https://placehold.co/60x60/5733FF/FFFFFF?text=Cam', price: 599.50}
                ];
                renderRollItems(mockRoll);
                showMessageBox('加载滚动列表数据失败，显示模拟数据。', 'error');
            });
    }

    // 加载精选好物数据
    function loadProductData() {
        fetch(`${API_BASE_URL}/products`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应异常');
                }
                return response.json();
            })
            .then(data => renderProducts(data))
            .catch(error => {
                console.error('加载精选好物失败:', error);
                // 提供模拟数据作为降级方案
                const mockProducts = [
                    {id: 1, name: '智能扫地机器人', information: '智能规划，自动回充，高效清洁。', imageUrl: 'https://placehold.co/60x60/33A0FF/FFFFFF?text=Robot', shopprice: '¥1999.00'},
                    {id: 2, name: '多功能料理机', information: '一机多用，搅拌榨汁，轻松烹饪。', imageUrl: 'https://placehold.co/60x60/FF33A0/FFFFFF?text=Mixer', shopprice: '¥899.50'}
                ];
                renderProducts(mockProducts);
                showMessageBox('加载精选好物数据失败，显示模拟数据。', 'error');
            });
    }

    // 加载订单数据
    function loadOrderData() {
        console.log('开始执行loadOrderData');
        fetch(`${API_BASE_URL}/orders`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应异常');
                }
                return response.json();
            })
            .then(data => {
                console.log('前端获取到的订单数据:', data);
                renderOrders(data);
            })
            .catch(error => {
                console.error('加载订单数据失败:', error);
                // 提供模拟数据用于调试
                const mockOrders = [
                    {
                        order_id: 'ORD1001',
                        imageUrl: 'https://placehold.co/60x60/FFC300/FFFFFF?text=Item1',
                        product_name: '智能手机',
                        quantity: 1,
                        price: 3999.00,
                        status: '待发货'
                    },
                    {
                        order_id: 'ORD1002',
                        imageUrl: 'https://placehold.co/60x60/C70039/FFFFFF?text=Item2',
                        product_name: '无线耳机',
                        quantity: 2,
                        price: 599.00,
                        status: '已完成'
                    },
                    {
                        order_id: 'ORD1003',
                        imageUrl: 'https://placehold.co/60x60/900C3F/FFFFFF?text=Item3',
                        product_name: '平板电脑',
                        quantity: 1,
                        price: 2999.00,
                        status: '待确认'
                    }
                ];
                renderOrders(mockOrders);
                showMessageBox('加载订单数据失败，显示模拟数据。', 'error');
            });
    }

    // --- 渲染函数和辅助函数 ---

    // 创建订单项的 HTML 字符串
    function createOrderItemHTML(order) {
        // 确保正确获取订单 ID，优先使用 order.id (后端已重命名)
        const orderId = order.id || order.order_id;

        // 处理图片 URL 字段，优先使用 order.imageUrl (后端已重命名)
        const imageUrl = order.imageUrl || order.image_url;

        // 处理价格字段，确保是数字类型
        let price = order.price;
        if (typeof price === 'string') {
            price = parseFloat(price.replace(/[^\d.]/g, '')); // 移除非数字和点字符
        } else if (typeof price === 'undefined' || price === null) {
            price = 0; // 默认值
        }

        // 处理状态显示
        const status = order.status || '未知状态';

        return `
        <td>${orderId}</td>
        <td>
            <div class="product-image">
                ${imageUrl ?
            `<img src="${imageUrl}" alt="${order.product_name}" onerror="this.parentElement.innerHTML='<i class=\\'fas fa-image placeholder-icon\\'></i>'">` :
            `<i class="fas fa-image placeholder-icon"></i>`}
            </div>
        </td>
        <td>${order.product_name || '未命名商品'}</td>
        <td>${order.quantity || 1}</td>
        <td>¥${price.toFixed(2)}</td>
        <td>
            <span class="status status-${getStatusClass(status)}">${status}</span>
        </td>
        <td>
            <button class="action-btn action-edit"><i class="fas fa-edit"></i> 编辑</button>
            <button class="action-btn action-delete"><i class="fas fa-trash"></i> 删除</button>
        </td>
    `;
    }

    // 根据订单状态返回对应的 CSS 类名
    function getStatusClass(status) {
        switch (status) {
            case '待发货':
                return 'pending';
            case '待确认':
                return 'shipped'; // 假设 "待确认" 对应 "shipped" 样式
            case '已完成':
                return 'delivered';
            case '已取消': // 添加已取消状态
                return 'canceled';
            default:
                return 'pending'; // 默认状态
        }
    }

    // 渲染订单数据到表格
    function renderOrders(orders) {
        const tbody = document.getElementById('orders-table-body');
        tbody.innerHTML = ''; // 清空现有内容

        if (!orders || orders.length === 0) {
            tbody.innerHTML = `
            <tr>
                <td colspan="7" style="text-align: center; padding: 20px;" class="no-data">
                    <i class="fas fa-inbox"></i>
                    <p>没有找到订单数据</p>
                </td>
            </tr>
        `;
            return;
        }

        orders.forEach(order => {
            const tr = document.createElement('tr');
            tr.innerHTML = createOrderItemHTML(order);
            tbody.appendChild(tr);
        });
    }

    // 渲染用户数据到表格
    function renderUsers(users) {
        const tbody = document.getElementById('users-table-body');
        tbody.innerHTML = ''; // 清空现有内容

        if (!users || users.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="7" style="text-align: center; padding: 20px;" class="no-data">
                        <i class="fas fa-inbox"></i>
                        <p>没有找到用户数据</p>
                    </td>
                </tr>
            `;
            return;
        }

        users.forEach(user => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${user.id}</td>
                <td>${user.username}</td>
                <td>${user.role || '普通用户'}</td>
                <td>${user.email || 'N/A'}</td>
                <td><span style="color: ${user.status === 'active' ? 'var(--success)' : 'var(--danger)'}">● ${user.status === 'active' ? '正常' : '禁用'}</span></td>
                <td>${user.created_at || 'N/A'}</td>
                <td>
                    <button class="action-btn action-edit"><i class="fas fa-edit"></i> 编辑</button>
                    <button class="action-btn action-delete"><i class="fas fa-trash"></i> 删除</button>
                </td>
            `;
            tbody.appendChild(tr);
        });
    }

    // 创建滚动列表项的 HTML 字符串
    function createRollItemHTML(item) {
        // 确保价格是数字类型
        const price = typeof item.price === 'string' ?
            parseFloat(item.price) : item.price;

        return `
        <td>${item.id}</td>
        <td>
            <div class="product-image">
                ${item.imageUrl ?
            `<img src="${item.imageUrl}" alt="${item.name}" onerror="this.parentElement.innerHTML='<i class=\\'fas fa-image placeholder-icon\\'></i>'">` :
            `<i class="fas fa-image placeholder-icon"></i>`}
            </div>
        </td>
        <td>${item.name}</td>
        <td>${item.description}</td>
        <td>¥${price.toFixed(2)}</td>
        <td>
            <button class="action-btn action-edit"><i class="fas fa-edit"></i> 编辑</button>
            <button class="action-btn action-delete"><i class="fas fa-trash"></i> 删除</button>
        </td>
    `;
    }

    // 渲染滚动列表数据到表格
    function renderRollItems(roll) {
        const tbody = document.getElementById('roll-table-body');
        tbody.innerHTML = ''; // 清空现有内容

        if (!roll || roll.length === 0) {
            tbody.innerHTML = `
            <tr>
                <td colspan="6" class="no-data" style="text-align: center; padding: 20px;">
                    <i class="fas fa-inbox"></i>
                    <p>没有找到滚动列表数据</p>
                </td>
            </tr>
        `;
            return;
        }

        roll.forEach(item => {
            const tr = document.createElement('tr');
            tr.innerHTML = createRollItemHTML(item);
            tbody.appendChild(tr);
        });
    }

    // 创建精选好物项的 HTML 字符串
    function createProductItemHTML(product) {
        // 提取价格数值，兼容 shopprice 和 price 字段
        const price = product.shopprice ?
            parseFloat(product.shopprice.replace(/[^\d.]/g, '')) :
            (product.price || 0);

        return `
            <td>${product.id}</td>
            <td>
                <div class="product-image">
                    ${product.imageUrl ?
            `<img src="${product.imageUrl}" alt="${product.name}" onerror="this.parentElement.innerHTML='<i class=\\'fas fa-image placeholder-icon\\'></i>'">` :
            `<i class="fas fa-image placeholder-icon"></i>`}
                </div>
            </td>
            <td>${product.name}</td>
            <td>${product.information || product.description || ''}</td>
            <td>¥${price.toFixed(2)}</td>
            <td>
                <button class="action-btn action-edit"><i class="fas fa-edit"></i> 编辑</button>
                <button class="action-btn action-delete"><i class="fas fa-trash"></i> 删除</button>
            </td>
        `;
    }

    // 渲染精选好物数据到表格
    function renderProducts(products) {
        const tbody = document.getElementById('products-table-body');
        tbody.innerHTML = ''; // 清空现有内容

        if (!products || products.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="6" style="text-align: center; padding: 20px;" class="no-data">
                        <i class="fas fa-inbox"></i>
                        <p>没有找到精选好物数据</p>
                    </td>
                </tr>
            `;
            return;
        }

        products.forEach(product => {
            const tr = document.createElement('tr');
            tr.innerHTML = createProductItemHTML(product);
            tbody.appendChild(tr);
        });
    }

    // 自定义消息框函数，替代 alert
    function showMessageBox(message, type = 'info') {
        const messageBox = document.createElement('div');
        messageBox.style.cssText = `
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            padding: 15px 25px;
            border-radius: 8px;
            color: white;
            font-weight: bold;
            z-index: 1001;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            min-width: 250px;
            text-align: center;
        `;

        // 根据消息类型设置背景色
        switch (type) {
            case 'success':
                messageBox.style.backgroundColor = 'var(--success)';
                break;
            case 'error':
                messageBox.style.backgroundColor = 'var(--danger)';
                break;
            case 'warning':
                messageBox.style.backgroundColor = 'var(--warning)';
                break;
            default:
                messageBox.style.backgroundColor = 'var(--secondary)'; // info
        }

        messageBox.textContent = message;
        document.body.appendChild(messageBox);

        // 渐入效果
        setTimeout(() => {
            messageBox.style.opacity = '1';
        }, 10);

        // 2.5 秒后渐出并移除
        setTimeout(() => {
            messageBox.style.opacity = '0';
            messageBox.addEventListener('transitionend', () => {
                messageBox.remove();
            });
        }, 2500);
    }
</script>
</body>
</html>
